<div class="one-row one-gutter-24">
  <div class="one-col-xs-6">
    <ul class="list-unstyled" style="min-height: 200px;border: 1px solid #AAA4A4;" [sortablejs]="list" [sortablejsOptions]="clone1Options">
      <li *ngFor="let content of list">{{content.name}}</li>
    </ul>
  </div>
  <div class="one-col-xs-12">
    <ul class="list-unstyled" style="min-height: 200px;border: 1px solid #AAA4A4;" [sortablejs]="list2" [sortablejsOptions]="clone1Options2">
      <li class="one-mouseover" *ngFor="let content of list2;index as i;">
        <div class="clearfix one-mouseover-block">
          <div class="pull-right"><i class="fa fa-close" (click)="removeElem(i)"></i></div>
        </div>
        <img *ngIf="content.content=='img'" [src]="content.src" alt="" style="width: 100%;height: 100%;">
        <p *ngIf="content.content=='text'">{{content.text}}</p>
        <div *ngIf="content.content=='chart'" [id]="'chart'+i" style="height: 300px;width: 100%;cursor: move;"></div>
      </li>
    </ul>
  </div>
  <div class="one-col-xs-6">
    <div>{{list2 | json}}</div>
  </div>
</div>
